<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- 引入VUE -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 
            收集表单数据：
                若：<input type="text" > 则v-model收集的是value值，用户输入的就是value值
                若：<input type="radio" > 则v-model收集的是value值，且需要给标签配置value值
                若：<input type="checkbox">
                    1.没有配置input的value值，那么收集的就是checkbox（勾选或者不勾选，是布尔值）
                    2.配置input的value属性
                        1.v-model的初始值是非数组，那么收集的就是checkbox（勾选或者不勾选，是布尔值）
                        2.v-model的初始值是数组，那么收集的就是value组成的数组
                备注： v-model的三个修饰符
                    .lazy 失去焦点在收集数据
                    .number 输入字符串转为有效数字
                    .trim 输入首尾空格过滤
         -->
        <div id="root">
            <!-- .prevent  阻止默认事件  事件修饰符 -->
            <form @submit.prevent="submitForm">
                <!-- .trim  去掉字符两端的空格 -->
                账号: <input type="text" v-model.trim='userInfo.admin'> <br>
                密码: <input type="password" v-model='userInfo.password' name="" id=""> <br>
                <!-- .number  输出的是数字 -->
                年龄: <input type="number" v-model.number='userInfo.age' name="" id=""> <br>
                性别: 男：<input type="radio" v-model="userInfo.sex" name="sex" value="nan">
                      女：<input type="radio" v-model="userInfo.sex" name="sex" value="nv"> <br>
                爱好：学习<input type="checkbox" name="" id="" v-model="userInfo.hobby" value="study">
                      吃饭<input type="checkbox" name="" id="" v-model="userInfo.hobby" value="eat">
                      打游戏<input type="checkbox" name="" id="" v-model="userInfo.hobby" value="game"> <br>
                所属地址：
                <select v-model="userInfo.city">
                    <option value="">请选择地址</option>
                    <option value="beijing">北京</option>
                    <option value="shanghai">上海</option>
                    <option value="guangzhou">广州</option>
                    <option value="shenzhen">深圳</option>
                </select>
                <br>
                其他信息：<br>
                <!-- .lazy  输入完毕之后再收集数据 -->
                <textarea v-model.lazy="userInfo.other" name="" id="" cols="30" rows="10"></textarea><br>
                <input v-model="userInfo.agree" type="checkbox" name="" id=""> 阅读并接受用户协议 <br>
                <button>提交</button>
            </form>
        </div>
        <script>
            Vue.config.productionTip = false;// 阻止vue在启动时生成生产提示

            const vm = new Vue({
                el:'#root',
                data:{
                    userInfo:{
                        admin:'',
                        password:'',
                        age:'',
                        sex:'nan',
                        hobby:[],
                        city:'beijing',
                        other:'',
                        agree:''
                    }
                    
                },
                methods: {
                    submitForm(e){
                        // e.preventDefault();//取消默认事件
                        console.log(this._data);
                        alert(JSON.stringify(this.userInfo))
                    }
                },
            })
        </script>
    </body>
</html>